<template>
  <div id="app">
    <!--返回按钮-->
    <div class="back" v-if="isShow">
      <a href="javascript:" @click="backto" class="icon_logo"></a>
    </div>
    <router-view/>
  </div>
</template>
<script>
  //购物车在这里，所以App.vue是参数的接受者
  import {vm, COUNTSTR} from './kits/vm';
  //监听goodsinfo的COUNTSTR的事件
  vm.$on(COUNTSTR, function (count) {
    //获取徽章标签
    var badge = document.querySelector('#badge');
    //徽章的值在自己的基础上加上count的值  parseInt字符串转换成数值
    badge.innerText = parseInt(badge.innerText) + count;
  });
  export default {
    created(){
      if (this.$route.path.toLocaleLowerCase() == '/home') {
        //刷新，如果是在主页就隐藏
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
    data() {
      return {
        //返回键隐藏
        isShow: false
      }
    },
    //监听路由变化
    watch: {
      '$route': function (newroute, oldroute) {
        if (newroute.path.toLocaleLowerCase() == '/home') {
          //如果是在主页就隐藏
          this.isShow = false;
        } else {
          this.isShow = true;
        }

      }
    },
    methods: {
      backto() {
        //路由对象中的go(-1) 实现返回到上一级页面
        this.$router.go(-1);
      }
    }

  }
</script>

<style lang="less">
  .back {
    width: 60px;
    /*position: absolute;*/
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 99999;
  }

  .back a {
    color: white;
    font-size: 16px;
    font-weight: bold;
  }

  .icon_logo {
    -webkit-background-size: 200px 200px;
    background-color: #000000;
    height: 20px;
    width: 0.7rem;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    background: url("../statics/imgs/images/back.png") no-repeat 0.3rem center;
    background-size: 0.32rem 0.32rem;
  }
</style>
